const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpack = require('webpack');

module.exports = {
  entry: {
    index: './src/Main.tsx',
    index2: './src/index2.ts',
    vendor: ['lodash'],
  },
  output: {
    filename: '[name].[hash].bundle.js',
    path: path.resolve(__dirname, 'dist'),
    chunkFilename: '[name].[chunkhash].bundle.js',
    publicPath: '/',
  },
  // devtool: 'inline-source-map',
  resolve: {
    extensions: ['.js', '.ts', 'tsx', 'jsx'],

    // 设置别名
    alias: {
      '@': path.resolve(__dirname, 'src'),
      '@c': path.resolve(__dirname, 'src/component'),
    },
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules|\.d\.ts$/,
      },
      {
        test: /\.css$/,
        use: [
          'style-loader',

          'css-loader',
          {
            loader: 'px2rem-loader',
            options: {
             
            },
          },
          'postcss-loader',
        ],
        exclude: /node_modules/,
      },
      {
        test: /\.less$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'px2rem-loader',
          },
          'postcss-loader',
          'less-loader',
        ],
      },
      {
        test: /\.(png|svg|jpg|gif)$/,
        use: ['url-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.(mp3|mp4)$/,
        loader: 'url-loader',
        exclude: /node_modules/,
        include: [path.resolve(__dirname, '/static/')],
        options: {
          outputPath: 'static/',
        },
      },
      {
        test: /\.(woff|woff2|eot|ttf|otf)$/,
        use: ['url-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.(csv|tsv)$/,
        use: ['csv-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.xml$/,
        use: ['xml-loader'],
        exclude: /node_modules/,
      },
      {
        test: /\.(js|jsx)$/,
        use: ['babel-loader'],
        exclude: /node_modules/,
      },
    ],
  },
  plugins: [
    new CleanWebpackPlugin(),
    new HtmlWebpackPlugin({
      title: 'hlhs',
      filename: './index.html', // html模板的生成路径
      template: './src/multiPage/index.html', //html模板
      //  html 文件进行压缩
      minify: {
        removeComments: true, //去注释
        collapseWhitespace: true, //压缩空格
        removeAttributeQuotes: true, //去除属性 标签的 引号  例如 <p id="test" /> 输出 <p id=test/>
      },
      hash: true, // 在打包的资源插入html会加上hash
      inject: true, // true：默认值，script标签位于html文件的 body 底部
      chunks: ['index'],
    }),
    new HtmlWebpackPlugin({
      title: 'hlhs',
      filename: './index2.html', // html模板的生成路径
      template: './src/index2.html', //html模板
      //  html 文件进行压缩
      minify: {
        removeComments: true, //去注释
        collapseWhitespace: true, //压缩空格
        removeAttributeQuotes: true, //去除属性 标签的 引号  例如 <p id="test" /> 输出 <p id=test/>
      },
      hash: true, // 在打包的资源插入html会加上hash
      inject: true, // true：默认值，script标签位于html文件的 body 底部
      chunks: ['index2'],
    }),

    new webpack.HotModuleReplacementPlugin(),
    // new webpack.HashedModuleIdsPlugin(),
  ],
  // CommonsChunkPlugin: {
  //   name: 'manifest',
  // },
  optimization: {
    namedModules: true,

    // runtimeChunk: {
    //   name: 'manifest',
    // },

    splitChunks: {
      // name: 'manifest',
      cacheGroups: {
        commons: {
          chunks: 'initial',
          name: 'common',
          minChunks: 2, //模块被引用2次以上的才抽离
          priority: -20,
        },
        vendors: {
          //拆分第三方库（通过npm|yarn安装的库）
          test: /[\\/]node_modules[\\/]/,
          name: 'vendor',
          chunks: 'initial',
          priority: -10,
        },
      },
    },
  },
};
